<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { articleAddChannel, articleUpdateChannel } from '@/api/article'
const dialogVisible = ref(false)
const form = ref()
const open = (row) => {
    console.log(row);
    formModel.value = { ...row }// 打开弹窗动态渲染
    dialogVisible.value = true
    console.log(formModel.value);


}
const formModel = ref({
    cate_name: '',
    cate_alias: '',
})
const rules = {
    cate_name: [
        {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur',
        },
        {
            pattern: /^[\u4e00-\u9fa5]{1,8}$/,
            message: '只能输入1到8位汉字',
            trigger: 'blur'

        }
    ],
    cate_alias: [
        {
            required: true,
            message: '请输入分类别称',
            trigger: 'blur',
        },
        {
            pattern: /^[a-zA-Z0-9]{1,8}$/,
            message: '只能输入1到8位字母',
            trigger: 'blur'
        }
    ]
}
const emit = defineEmits(['success'])
const submitBtn = async () => {
    await form.value.validate()
    const edit = formModel.value.id
    if (edit) {
        await articleUpdateChannel(formModel.value)
        ElMessage.success('编辑成功!')
    }
    else {
        await articleAddChannel(formModel.value)
        ElMessage.success('添加成功!')
    }
    dialogVisible.value = false
    emit('success')
}
defineExpose({
    open
})
console.log(form);

</script>
<template>

    <el-dialog v-model="dialogVisible" :title="formModel.id ? '编辑分类' : '添加分类'" width="500">
        <div class="formDiaog">
            <el-form :model="formModel" :rules="rules" ref="form">
                <el-form-item prop="cate_name" label="分类名称">
                    <el-input v-model="formModel.cate_name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item prop="cate_alias" label="分类别称">
                    <el-input v-model="formModel.cate_alias" placeholder="请输入分类别称"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitBtn">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>
<style lang="scss" scoped></style>